<template>
  <!-- 关注和粉丝 -->
  <div>
    <van-nav-bar fixed>
      <template #left>
        <van-icon
          name="arrow-left"
          color="#FF8800"
          size="20"
          @click="onClickLeft()"
        />
      </template>
      <template #title>
        <h3>关注和粉丝</h3>
      </template>
    </van-nav-bar>
    <div style="height: 46px"></div>
    <van-tabs
      sticky
      offset-top="46px"
      v-model="activeNames"
      title-active-color="#FF7F24"
      title-inactive-color="#BEBEBE"
      color="#FF7F24"
    >
      <van-tab title="关注" name="Focus">
        <template v-if="focus">
          <focus-cell
            v-for="(item, i) in focus"
            :key="i"
            :item="item"
          ></focus-cell>
        </template>
        <van-empty v-else description="你还没有关注帮友哦~~"></van-empty>
      </van-tab>
      <van-tab title="粉丝" name="fans">
        <template v-if="fans">
          <fans-cell
            v-for="(item, i) in fans"
            :key="i"
            :item="item"
          ></fans-cell>
        </template>
        <van-empty v-else description="继续加油哦~~"></van-empty>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import FocusCell from "@/components/FocusCell.vue";
import FansCell from "@/components/FansCell.vue";
export default {
  components: { FocusCell, FansCell },
  computed: {
    ...mapState(["userInfo"]),
  },
  mounted() {
    this.getFocus();
    this.getFans();
    this.activeNames = this.$route.params.activeNames;
  },
  data() {
    return {
      activeNames: "",
      focus: null,
      fans: null,
    };
  },
  watch: {
    activeNames(newValue, oldValue) {
      if (newValue == "Focus") {
        this.getFocus();
      } else {
        this.getFans();
      }
    },
  },
  methods: {
    onClickLeft() {
      return this.$router.go(-1);
    },
    getFocus() {
      let url = "focus";
      let params = `user_id=${this.userInfo.uid}`;
      this.axios.post(url, params).then((res) => {
        // console.log(res);
        this.focus = res.data.data;
      });
    },
    getFans() {
      let url = "fans";
      let params = `user_id=${this.userInfo.uid}`;
      this.axios.post(url, params).then((res) => {
        // console.log(res);
        this.fans = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
